<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>快捷键测试</title>

    <script src="shortcut.js"></script>

</head>

<body>
    <div id="div">

        <div style="float: right;width: 350px;">
            <div id="infoPanel"></div>

        </div>
        <div id="buttons">

        </div>
    </div>

    <script>
function addButton(text,index){
    var container = document.querySelector("#buttons");
    var btn = document.createElement("button");
            btn.innerText = text+index + shortcut.addShortcut("test"+index, ['ctrl'],shortcut.getCombinNormalKey(index))
            .withOn(cmd => {
                displayCommand("shortcut: " + cmd);
                btn.click();
            }).keyqu;

            btn.onclick = function (e) {
                
                console.log("["+btn.innerText+"]被点击了")
            }
            container.appendChild(btn);
}
for(var i=0;i<10;i++){
    addButton("按钮",i);
}

        function createButtons() {

            var container = document.querySelector("#buttons");
            var removeBtn = document.createElement("button");
            removeBtn.innerText = "删除save快捷方式";
            removeBtn.onclick = function () {
                shortcut.removeShortcut("save");
            }
            container.appendChild(removeBtn);

            var addBtn = document.createElement("button");
            addBtn.innerText = "添加save快捷方式";
            addBtn.onclick = function () {
                shortcut.addShortcut("save", [shortcut.cmdKey.ctrl], ["s"]).on = cmd => alert(cmd.toString("u"));
            }
            container.appendChild(addBtn);

            var withOnBtn = document.createElement("button");
            withOnBtn.innerText = "withOn" + shortcut.addShortcut("testWithOn", ['ctrl'], ["m", "o"]).withOn(cmd => {
                withOnBtn.click();
            }).keyqu;
            withOnBtn.onclick = function (e) {
                console.log("withOn按钮点击了")
            }
            container.appendChild(withOnBtn);

        }
        createButtons();

        function displayShortcuts() {
            var pannel = document.querySelector("#infoPanel");
            for (var s of shortcut.all()) {
                pannel.innerHTML += "<p>" + JSON.stringify(s) + "<p>";
            }
        }

        function displayCommand(text) {
            document.querySelector("#div").innerHTML += "<p>" + text + "</p>"
            console.log(text);
        }
        //测试on
        shortcut.save.on = function (cmd) {
            displayCommand("shortcut: " + cmd);
        }
        displayCommand("通过save.on添加处理函数");

        var id = shortcut.addShortcut("print", [shortcut.cmdKey.ctrl], ["s", "q"]).addListener((cmd) => {
            displayCommand("shortcut: " + cmd);
        })
        displayCommand("已通过shortcut.addShortcut 添加print快捷方式,并添加监听，id:" + id);
        //测试删除监听
        shortcut.print.removeListener(id);
        displayCommand("已通过shortcut.print.removeListener移除监听,id:" + id);

        shortcut.removeShortcut("print")
        displayCommand("已通过shortcut.removeShortcut移除print快捷方式");


        var listener = shortcut.addEventListenerByName("cancel", (e) => {
            displayCommand("shortcut: " + e.detail);
        })
        // shortcut.removeEventListenerByName("cancel", listener);
        // displayCommand("已通过shortcut.removeEventListenerByName移除cancel监听");

        shortcut.query.on = cmd => {
            displayCommand("shortcut: " + cmd.toString("qu"));
        }
        shortcut.reset.addListener(cmd => {
            displayCommand("shortcut: " + cmd.toString("qu"));
        });

        shortcut.create.on = cmd => {
            displayCommand("shortcut: " + cmd.keyqu);
        }
        shortcut.addShortcut("test", [shortcut.cmdKey.ctrl, shortcut.cmdKey.alt], ["q", "s"]).on = cmd => {
            displayCommand("shortcut: " + cmd.keyqu);
        }
        displayShortcuts();









    </script>
</body>

</html>